*,
*:before,
*:after {
  box-sizing: border-box;
  margin    : 0;
  padding   : 0;
}

$nums      : 8;
$sidePad   : 20px;
$elM       : 0.5%;
$elW       : (100% - $elM * $numPerLine * 2) / $numPerLine;
$numPerLine: 4;

.workList {
  width     : 100%;
  min-height: 20vh;
  max-height: 100vh;
  padding   : $sidePad;

  display  : flex;
  flex-flow: row wrap;

  .work {
    width           : $elW;
    height          : 20vh;
    margin          : $elM;
    background-color: #ddd;

    @for $i from 0 through $num {
      &:nth-child(#{$i} + 1) {
        background: hsl(200,50%,50%);
      }
    }
  }
}